<template>
	<view class="p-2">
		<view class="flex align-center" style="height: 100rpx;">
			<block v-for="(item,index) in tarbarList" :key="index">
				<view class="flex-1 flex align-center justify-center" @click="onTabClick(index)">
					<text class="font-weight-bold " :class="tabIndex===index ? 'text-main font-lg':'text-dark font-md'">{{item.name}}</text>
				</view>
			</block>
		</view>
		<swiper :duration="150" :style="{height:scrollH+'px'}" :current="tabIndex" @change="onSwiperChange">
			<swiper-item>
				<scroll-view scroll-y="true" :style="{height:scrollH+'px'}">
					<block v-for="(item,index) in userList" :key="index">
						<view class="py-2 border-bottom flex align-center">
							<image class="user-avatar rounded-circle" :src="item.userpic" mode=""></image>
							<view class="flex flex-column ml-2">
								<text class="text-dark">{{item.username}}</text>
								<uni-badge type="error" text="22"></uni-badge>
							</view>
							<view class="ml-auto">
								<text class="iconfont icon-xuanze-yixuan font-md" :class="item.isFollow?'text-main':'text-muted'"></text>
							</view>
						</view>
					</block>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item"></view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniBadge from '@/components/uni-ui/uni-badge/uni-badge.vue'
	export default {
		components:{
			uniBadge
		},
		data() {
			return {
				tabIndex:0,
				tarbarList:[
					{name:'互关',num:0},
					{name:'关注',num:2},
					{name:'粉丝',num:1}
				],
				scrollH:600,
				userList:[
					{
						username:'sunshine boy',
						userpic:'/static/default.jpg',
						sex:0,
						isFollow:true
					},
					{
						username:'15010679562',
						userpic:'/static/default.jpg',
						sex:1,
						isFollow:true
					},
					{
						username:'Lizhihui',
						userpic:'/static/default.jpg',
						sex:1,
						isFollow:false
					},
					{
						username:'zhangnala',
						userpic:'/static/default.jpg',
						sex:0,
						isFollow:false
					},
					{
						username:'sunshine boy',
						userpic:'/static/default.jpg',
						sex:0,
						isFollow:true
					},
					{
						username:'Lizhihui',
						userpic:'/static/default.jpg',
						sex:1,
						isFollow:false
					},
					{
						username:'zhangnala',
						userpic:'/static/default.jpg',
						sex:0,
						isFollow:false
					},
					{
						username:'sunshine boy',
						userpic:'/static/default.jpg',
						sex:0,
						isFollow:true
					},
					{
						username:'Lizhihui',
						userpic:'/static/default.jpg',
						sex:1,
						isFollow:false
					},
					{
						username:'zhangnala',
						userpic:'/static/default.jpg',
						sex:0,
						isFollow:false
					},
					{
						username:'sunshine boy',
						userpic:'/static/default.jpg',
						sex:0,
						isFollow:true
					},
					{
						username:'Lizhihui',
						userpic:'/static/default.jpg',
						sex:1,
						isFollow:false
					},
					{
						username:'zhangnala',
						userpic:'/static/default.jpg',
						sex:0,
						isFollow:false
					},
					{
						username:'sunshine boy',
						userpic:'/static/default.jpg',
						sex:0,
						isFollow:true
					}
				]
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight - res.statusBarHeight -  uni.upx2px(100);
				}
			})
		},
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url:'/pages/search/search?type=user'
			})
		},
		onNavigationBarButtonTap() {
			uni.navigateBack({
				delta:1
			})
		},
		methods:{
			onTabClick(index) {
				this.tabIndex = index;
			},
			onSwiperChange(e) {
				console.log(e)
				this.tabIndex = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
.user-avatar {
	width: 104rpx;
	height: 104rpx;
}
</style>
